<template>
  <div style="width:100%; height:110%; background-color:#F2F2F2;">
    <div class="root" style="width: 80%; margin:auto; background-color:#FFFFFF; border-radius: 10px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); padding: 30px; margin-bottom: 10px;">
      <div class="type">
        <div class="button" @click="showPersonal()">个人信息</div>
        <div class="button" @click="showMedical()">电子病历</div>
      </div>
      <div class="show">
        <div id="personal">
          <div v-if="patient">
            <h2 style="font-size: 24px; color: #333; margin-bottom: 20px;">患者信息</h2>
            <div class="info-item flex">
              <div class="field">
                <label for="realName"><strong>姓名:</strong></label>
                <input type="text" id="realName" v-model="patient.realName" disabled class="input-box" />
              </div>
              <div class="field">
                <label for="gender"><strong>性别:</strong></label>
                <input type="text" id="gender" v-model="patient.gender" disabled class="input-box" />
              </div>
              <div class="field">
                <label for="age"><strong>年龄:</strong></label>
                <input type="text" id="age" v-model="patient.age" disabled class="input-box" />
              </div>
              <div class="field">
                <label for="occupationId"><strong>职业:</strong></label>
                <input type="text" id="occupationId" v-model="patient.occupationId" disabled class="input-box" />
              </div>
              <div class="field">
                <label for="ethnicId"><strong>民族:</strong></label>
                <input type="text" id="ethnicId" v-model="patient.ethnicId" disabled class="input-box" />
              </div>
            </div>
            <div class="info-item flex">
              <div class="field" style="flex: 1; padding-right: 10px;">
                <label for="idCardNumber"><strong>证件号码:</strong></label>
                <input type="text" id="idCardNumber" v-model="patient.idCardNumber" disabled class="input-box" />
              </div>
              <div class="field" style="flex: 1; padding-right: 10px;">
                <label for="phoneNumber"><strong>手机号:</strong></label>
                <input type="text" id="phoneNumber" v-model="patient.phoneNumber" disabled class="input-box" />
              </div>
              <div class="field" style="flex: 1;">
                <label for="address"><strong>地址:</strong></label>
                <input type="text" id="address" v-model="patient.address" disabled class="input-box" />
              </div>
            </div>


          </div>
          <div v-else>
            <p style="text-align: center; color: #999;">加载中...</p>
          </div>
          <el-col :span="1.5">
            <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
                v-hasPermi="['sn:member:add']"
            >新增</el-button>
          </el-col>
          <el-table v-loading="loading" :data="patientMenber" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="家属id" align="center" prop="familyMemberId" />
            <el-table-column label="患者id" align="center" prop="patientId" />
            <el-table-column label="家庭关系id" align="center" prop="familyRelationshipId" />
            <el-table-column label="家属姓名" align="center" prop="familyMemberName" />
            <el-table-column label="手机号" align="center" prop="phoneNumber" />
            <el-table-column label="年龄" align="center" prop="age" />
            <el-table-column label="性别" align="center" prop="gender" />
            <el-table-column label="身份证号" align="center" prop="idCardNumber" />
            <el-table-column label="地址" align="center" prop="address" />
            <el-table-column label="民族id" align="center" prop="ethnicId" />
            <el-table-column label="职业id" align="center" prop="occupationId" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
              <template #default="scope">
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['sn:member:edit']">修改</el-button>
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['sn:member:remove']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
<!--    ===============================================================  -->
<!--   电子病历      -->
        <div id="medical" style="display: none;">
          <p>这是电子病历的内容。</p>





          <div style="display: flex;/* 使用 Flexbox 布局 */justify-content: space-between;  /* 左右两侧分布 */padding: 20px;"v-for="(item, index) in choosemenu" :key="index">
            <!-- 左侧选择框 -->
            <div style="background-color: #f4f4f4; padding: 20px; width: 350px;" class="container">
              <div style="justify-content: space-between;"
                   >
                <div

                    @click="handleSelect(index,item)"
                    style="padding: 10px 20px; margin-bottom: 10px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); height: 100px;"
                    :class="['color-div', { 'active': selectedIndex === index }]">
                  <!-- 第一行：门诊时间 -->
                  <div style="margin-bottom: 10px; font-size: 16px; font-weight: bold; color: #333;">
                    <span style="color: #409EFF;">门诊时间：</span>{{ item.visitTime }}
                  </div>

                  <!-- 第二行：门诊编号 和 诊断 -->
                  <div style="margin-bottom: 10px; display: flex; font-size: 14px; color: #555;">
                    <div>
                      <span style="color: #409EFF;">门诊编号：</span>{{ item.departments.departmentId }}
                    </div>
                    <div>
                      <span style="color: #409EFF; margin-left: 50px;">诊断：</span>{{ item.preliminaryDiagnosis }}
                    </div>
                  </div>

                  <!-- 第三行：接诊科室 和 接诊医生 -->
                  <div style="font-size: 14px; color: #555;">
                    <span style="color: #409EFF;">接诊科室：</span>{{ item.departments.departmentName }}
                    <span style="margin-left: 20px; color: #409EFF;">接诊医生：</span>{{ item.employee.name }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 右侧展示内容 -->
            <div  v-if="selectedIndex === index">
              <div >
                <div>体格信息</div>
                <div v-if="physicalInfolist">
                    <span>体温:{{physicalInfolist.temperature
                      }}℃        呼吸:{{physicalInfolist.respiration}}次/分      脉搏:{{physicalInfolist.pulse}}次/分     血压:{{physicalInfolist.bloodPressure}}mmgh</span>
                    <span>血糖:{{physicalInfolist.bloodSugar}}mmol/L   血脂:{{physicalInfolist.bloodLipid}}mmol/L    身高:{{physicalInfolist.height}}cm      体重:{{physicalInfolist.weight}}kg</span>
                </div>
              </div>
              <div >
                <div>病例信息</div>
                <div>
                  <div>发病时间:{{ recordlist.visitRecord.onsetTime }}</div>
                  <div>主诉:{{ recordlist.visitRecord.chiefComplaint }}</div>
                  <div>现病史:{{ recordlist.currentMedicalHistory }}</div>
                  <div>既往史:{{ recordlist.pastMedicalHistory }}</div>
                  <div>个人史:{{ recordlist.personalHistory }}</div>
                  <div>家族史:{{ recordlist.familyHistory }}</div>
                  <div>辅助检查:{{ recordlist.visitRecord.auxiliaryExamination }}</div>
                  <div>初步诊断:{{ recordlist.visitRecord.preliminaryDiagnosis }}</div>
                  <div>治疗意见:{{ recordlist.visitRecord.treatmentAdvice }}</div>
                  <div>备注:{{ recordlist.visitRecord.remarks }}</div>
                  <div>医嘱:{{ recordlist.visitRecord.medicalAdvice }}</div>



                </div>
              </div>
              <div >
                <div>处方信息</div>
                <div>
                    <div>药物:{prescriptionlist.name}}</div>
                  <div>总量:{{prescriptionlist.totalAmount}}</div>
                  <div>用法{{prescriptionlist.usage}}</div>
                  <div>单次用量:{{prescriptionlist.singleDose}}</div>
                  <div>天数:{{prescriptionlist.days}}</div>
                </div>
              </div>

            </div>
          </div>










        </div>
      </div>
      <el-row :gutter="10" class="mb8">

    </el-row>



    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改家属对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="memberRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="患者id" prop="patientId">
          <el-input v-model="form.patientId" placeholder="请输入患者id" />
        </el-form-item>
        <el-form-item label="家庭关系id" prop="familyRelationshipId">
          <el-input v-model="form.familyRelationshipId" placeholder="请输入家庭关系id" />
        </el-form-item>
        <el-form-item label="家属姓名" prop="familyMemberName">
          <el-input v-model="form.familyMemberName" placeholder="请输入家属姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" placeholder="请输入年龄" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-input v-model="form.gender" placeholder="请输入性别" />
        </el-form-item>
        <el-form-item label="身份证号" prop="idCardNumber">
          <el-input v-model="form.idCardNumber" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入地址" />
        </el-form-item>
        <el-form-item label="民族id" prop="ethnicId">
          <el-input v-model="form.ethnicId" placeholder="请输入民族id" />
        </el-form-item>
        <el-form-item label="职业id" prop="occupationId">
          <el-input v-model="form.occupationId" placeholder="请输入职业id" />
        </el-form-item>
        <el-form-item label="扩展字段1" prop="ext1">
          <el-input v-model="form.ext1" placeholder="请输入扩展字段1" />
        </el-form-item>
        <el-form-item label="扩展字段2" prop="ext2">
          <el-input v-model="form.ext2" placeholder="请输入扩展字段2" />
        </el-form-item>
        <el-form-item label="扩展字段3" prop="ext3">
          <el-input v-model="form.ext3" placeholder="请输入扩展字段3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    </div>

  </div>
</template>

<script setup name="Member">
import { useRoute } from 'vue-router';
// 默认显示个人信息内容
window.onload = function() {
  showPersonal();
};

// 显示个人信息内容
function showPersonal() {
  // 隐藏电子病历内容
  document.getElementById('medical').style.display = 'none';
  // 显示个人信息内容
  document.getElementById('personal').style.display = 'block';
}

// 显示电子病历内容
function showMedical() {
  // 隐藏个人信息内容
  document.getElementById('personal').style.display = 'none';
  // 显示电子病历内容
  document.getElementById('medical').style.display = 'block';


}


const route = useRoute();
const pId = route.query.patientId;  // 获取查询参数 patientId
import {getMember, delMember, addMember, updateMember} from "@/api/sn/member";
import {getinfo} from "@/api/registration/registration"
import {onMounted} from "vue";
import axios from "axios";
import Cookies from 'js-cookie';
import {getphysical, getprescription, getRecord} from "@/api/registration/addregistration/management.js";
const TokenKey = 'Admin-Token';
const token = Cookies.get(TokenKey);
const { proxy } = getCurrentInstance();
const memberList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
// 初始化 patientMenber 对象
const patientMenber = ref(null);
const patient = ref(null);

const choosemenu = ref(null);


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    familyMemberId: null,
    patientId: null,
    familyRelationshipId: null,
    familyMemberName: null,
    phoneNumber: null,
    age: null,
    gender: null,
    idCardNumber: null,
    address: null,
    ethnicId: null,
    occupationId: null,
    ext1: null,
    ext2: null,
    ext3: null
  },
  rules: {
    patientId: [
      { required: true, message: "患者id不能为空", trigger: "blur" }
    ],
    familyMemberName: [
      { required: true, message: "家属姓名不能为空", trigger: "blur" }
    ],
  }
});
const { queryParams, form, rules } = toRefs(data);
function getList() {
  if (pId) {
    axios.get(`http://localhost:8888/sn/member/list/${pId}`, {
      headers: {
        Authorization: token
      }
    })
        .then((response) => {
          patientMenber.value = response.data;
          console.log(response.data);  // 你可以根据需要处理返回的数据
        })
        .catch((error) => {
          console.error('获取患者信息失败:', error);
        });
    getinfo(pId).then(re =>{

      choosemenu.value = re
      console.log(choosemenu.value)
    })


  } else {
    console.error('没有找到患者ID');
  }
  loading.value = false;  // 没有患者ID时也关闭加载状态
}
onMounted(() => {
  if (pId) {
    axios.get(`http://localhost:8888/sn/member/list/${pId}`, {
      headers: {
        Authorization: token
      }
    })
        .then((response) => {
          patientMenber.value = response.data;
          console.log(response.data);  // 你可以根据需要处理返回的数据
        })
        .catch((error) => {
          console.error('获取患者信息失败:', error);
        });
  } else {
    console.error('没有找到患者ID');
  }
  if (pId) {
    axios.get(`http://localhost:8888/sn/doctor/patient/${pId}`, {
      headers: {
        Authorization: token
      }
    })
        .then((response) => {
          patient.value = response.data;
          console.log(response.data);  // 你可以根据需要处理返回的数据
        })
        .catch((error) => {
          console.error('获取患者信息失败:', error);
        });
  } else {
    console.error('没有找到患者ID');
  }
  loading.value = false;  // 没有患者ID时也关闭加载状态

});
// 取消按钮
function cancel() {
  open.value = false;
  reset();
}
// 表单重置
function reset() {
  form.value = {
    familyMemberId: null,
    patientId: null,
    familyRelationshipId: null,
    familyMemberName: null,
    phoneNumber: null,
    age: null,
    gender: null,
    idCardNumber: null,
    address: null,
    ethnicId: null,
    occupationId: null,
    ext1: null,
    ext2: null,
    ext3: null
  };
  proxy.resetForm("memberRef");
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}
// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.familyMemberId);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}
/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加家属";
}
/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _familyMemberId = row.familyMemberId || ids.value
  getMember(_familyMemberId).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改家属";
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs["memberRef"].validate(valid => {
    if (valid) {
      if (form.value.familyMemberId != null) {
        updateMember(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addMember(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}
/** 删除按钮操作 */
function handleDelete(row) {
  const _familyMemberIds = row.familyMemberId || ids.value;
  proxy.$modal.confirm('是否确认删除家属编号为"' + _familyMemberIds + '"的数据项？').then(function() {
    return delMember(_familyMemberIds);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
/** 导出按钮操作 */
function handleExport() {
  proxy.download('sn/member/export', {
    ...queryParams.value
  }, `member_${new Date().getTime()}.xlsx`)
}


// ===============================================================
// 电子病历




const selectedIndex = ref(null); // 初始化 selectedIndex 为 null
const physicalInfolist = ref({
      temperature : null,
      respiration: null,
      pulse: null,
      bloodPressure: null,
      bloodSugar: null,
      bloodLipid: null,
      height: null,
      weight: null,
    })
;
const recordlist = ref(
    {
visitRecord:{
  onsetTime:null,
  auxiliaryExamination:null,
  preliminaryDiagnosis:null,
  treatmentAdvice:null,
  remarks:null,
  medicalAdvice:null,
  chiefComplaint:null,
},
currentMedicalHistory :null,
pastMedicalHistory :null,
personalHistory :null,
familyHistory:null,
});
const prescriptionlist = ref(
    {
    name :null,
    totalAmount : null,
    usage : null,
    singleDose : null,
    days : null,
}
)
;

// 处理选项选择变化
function handleSelect(index, item) {
  console.log(index);
  selectedIndex.value = index; // 直接更新 selectedIndex
  getphysical(item.visitRecordId).then(response => {
    physicalInfolist.value = response.data
    console.log("体格信息")
    console.log(physicalInfolist.value)
    console.log(physicalInfolist.value.temperature)
  })
  getRecord(item.visitRecordId).then(response => {
    recordlist.value=response.data
    console.log("病例信息")
    console.log(recordlist.value)
  })
  getprescription(item.visitRecordId).then(response => {
    prescriptionlist.value = response.data
    console.log("处方信息")
    console.log(prescriptionlist.value)
  })

}







getList();

</script>
<style>
.root {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.info-item {
  margin: 15px 0;
  font-size: 16px;
  color: #555;
}

.flex {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 20px; /* 字段之间的间距 */
}

.field {
  width: 18%;  /* 控制每个输入框的宽度 */
}

label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
  color: #333;
}

.input-box {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-left: 10px;
  box-sizing: border-box;
  cursor: not-allowed;
}

.input-box:disabled {
  background-color: #eaeaea;
}
.container {
  display: flex;
  justify-content: space-between;
}

.left-panel,
.right-panel {
  width: 48%;
}

h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.selected-item input {
  width: 60px;
  margin-left: 10px;
  padding: 5px;
}

.item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  border-radius: 5px;
}

button {
  padding: 5px 10px;
  cursor: pointer;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #0056b3;
}
/* 按钮样式 */
.button {
  display: inline-block;
  padding: 10px 20px;
  margin: 10px;
  background-color: #409EFF; /* 绿色背景 */
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border: none;
  border-radius: 5px; /* 圆角 */
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

/* 鼠标悬停时的效果 */
.button:hover {
  background-color: #409EFF;
  transform: scale(1.05); /* 放大效果 */
}

/* 鼠标按下时的效果 */
.button:active {
  background-color: #409EFF;
  transform: scale(0.98); /* 缩小效果 */
}

/* 已激活按钮样式 */
.button.active {
  background-color: red;
}
.root {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 20px;
}

.info-item {
  margin: 15px 0;
  font-size: 16px;
  color: #555;
}

.flex {
  display: flex;
  flex-wrap: wrap; /* 允许换行 */
  gap: 20px; /* 字段之间的间距 */
}

.field {
  width: 18%;  /* 控制每个输入框的宽度 */
}

label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
  color: #333;
}

.input-box {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  color: #555;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  margin-left: 10px;
  box-sizing: border-box;
  cursor: not-allowed;
}

.input-box:disabled {
  background-color: #eaeaea;
}
.container {
  display: flex;
  justify-content: space-between;
}

.left-panel,
.right-panel {
  width: 48%;
}

h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.selected-item input {
  width: 60px;
  margin-left: 10px;
  padding: 5px;
}

.item-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f9f9f9;
  margin-bottom: 10px;
  border-radius: 5px;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.color-div {
  padding: 10px;
  background-color: lightgray;
  text-align: center;
  cursor: pointer;
  border-radius: 5px;
}

.color-div:active {
  background-color: blue;
  color: white;
}

.left-side {
  background-color: #f0f0f0;  /* 背景颜色 */
  padding: 10px;
  width: 45%;              /* 左侧宽度 */
}

.right-side {
  background-color: #dcdcdc;  /* 背景颜色 */
  padding: 10px;
  width: 45%;              /* 右侧宽度 */
}

</style>
